class useDraggable {
  dom: HTMLDivElement
  childrenDom: NodeList
  isDrag: boolean = false
  dragDom = null
  constructor(domId: string) {
    this.dom = document.getElementById(domId) as HTMLDivElement
    this.dom.style.position = 'relative'
    this.childrenDom = this.dom.childNodes
    this.init()

  }
  init() {
    for (let i = 0; i < this.childrenDom.length; i++) {
      // @ts-ignore
      // @ts-ignore
      this.childrenDom[i].style.width = '100%'
      this.childrenDom[i].addEventListener('mousedown', this.mousedown)
      this.childrenDom[i].addEventListener('mousemove', this.mousemove)
      this.childrenDom[i].addEventListener('mouseup', this.mouseup)
      //  this.childrenDom[i]

    }
  }
  mousedown(e) {
    console.log( e);
    e.target.style.position = 'fixed'
    this.dragDom = e.target
    this.isDrag = true
    console.log( e.clientX - e.layerX);
    

  }
  mousemove(e) {
    if (this.isDrag) {
      // this.dragDom.style.left = e.clientX - e.layerX + 'px'
      // this.dragDom.style.top = e.clientY - e.layerY + 'px'

    }


  }
  mouseup(e) {
    e.target.style.position = ''
    this.isDrag = false

  }

}
export default useDraggable